<template>
  <div>
    <el-card class="box-card">
      <div class="clearfix">
        <div class="header">
          <el-button type="danger" icon="el-icon-delete" @click="deleteTable">删除</el-button>
          <div style="float:left">
            <el-input
              class="headerinput"
              style="max-width:'40px'"
              v-model="input"
              placeholder="文章分类"
            ></el-input>
            <el-button type="primary" icon="el-icon-search" @click="searchItem">搜索</el-button>
          </div>
        </div> 
        <el-tag class="headerinfo">当前文章共计{{totle}}个</el-tag>
      </div>
      <!-- end of header -->
      <el-table ref="articleTable" @selection-change="handleSelectionChange" stripe border :data="pagedata">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="categories[0].title" label="文章分类" ></el-table-column>
        <el-table-column prop="title" label="文章标题" width=400></el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button @click="$router.push(`edit/${scope.row._id}`)" type="text" size="small">编辑</el-button>
            <el-button @click="removeList(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pagination" @current-change="changePage" background layout="prev,pager,next" :total="totle"></el-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        categorylist:[],
        pagedata:[],
        totle:null,
        input:'',
        selection:[]
      }
    },
    created() {
      this.feach()
      this.feachPage()
    },
    methods: {
      async feach(){
        let res = await this.$http.get('/rest/articles')
        this.categorylist=res.data
        this.totle=parseInt(this.categorylist.length)
      },
      async feachPage(pageIndex=1,pageSize=10){
        let res = await this.$http.get("/rest/articles/pageIndex",{
          params:{
            pageSize,
            pageIndex
          }
        })
        this.pagedata=res.data
      },
      changePage(pageIndex){
        this.page=pageIndex
        this.feachPage(pageIndex)
      },
      searchItem(){
        if (this.input!='') {
          this.pagedata=[]
          let res = this.categorylist.map(i=>{
            if (i.categories[0].title===this.input) {
              return this.pagedata.push(i)
            }
          })
        }else{
          this.feachPage()
        }
      },
      async removeList(row){
        this.$confirm(`是否确定要删除物品"${row.title}"`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.delete(`/rest/articles/${row._id}`).then(res=>{
            console.log(res.status);
            this.feach()
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        
      },
          handleSelectionChange(val) {
      this.selection = val;
    },
    async deleteTable() {
      if (this.selection=='') {
        return
      }
      this.$confirm(`是否确定要删除"${this.selection[0].title}..."`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.selection.forEach(e => {
            this.$http.delete(`/rest/articles/${e._id}`);
            console.log(`成功删除${e.name}`);
          });
          this.feach();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
    },
  }
</script>

<style lang="scss" scoped>
.header {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  .headerinput {
    width: 160px !important;
    margin-right: 5px;
  }
}
.headerinfo{
  width: 100%;
}
.pagination{
  margin: 10px 0;
  float: right;
}
</style>